<template>
  <div>
    <Tabar />
    <div class="home">
      <!-- 导航 -->
      <Side />
      <!-- 内容 -->
      <div class="list">
        <!-- 面包屑 -->
        <Crumber />
        <div class="content">
          <!-- 组件中有 Promise 对象时，即 Axios、Ajax 这类的请求，然后把数据渲染到模板中就会报 -->
          <Suspense>
            <router-view></router-view>
          </Suspense>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Tabar from "@/components/tabar/Tabar.vue";
import Side from "@/components/side/Side.vue";
import Crumber from "@/components/crumber/Crumber.vue";
</script>

<style>
.list {
  width: 100%;
}

.home {
  height: calc(100vh - 80px);
  display: flex;
}

.content {
  height: 93%;
  flex: 1;
  width: 99%;
  box-sizing: border-box;
  overflow-y: auto;
  padding-left: 20px;
}

::-webkit-input-placeholder {
  /* WebKit browsers，webkit内核浏览器 */
  color: #ccc;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #ccc;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #ccc;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #ccc;
}
</style>
